<template>
  <div class="bottom">
    <!-- 播放信息 -->
    <div class="neiro">
      <transition name="sss" mode="out-in">
        <ul
          class="lift"
          border="0"
          style="cursor: pointer"
          key="1"
          v-if="!show3"
        >
          <li
            @mouseover="jingr"
            @mouseleave="chuq"
            @click="qugequ"
            v-if="datas.songs[0]"
          >
            <img :src="gequ.img" alt="" />
            <transition name="el-fade-in-linear" class="jinr">
              <div v-show="intoge" class="transition-box">
                <div class="jinr">
                  <img src="../assets/fh.png" alt="" />
                </div>
              </div>
            </transition>
          </li>

          <li v-if="datas.songs[0]">
            <div class="texs">
              <span>
                {{ datas.songs[indexyp].name | texst }}
              </span>
              <div class="img" v-show="gequ.sc">
                <img src="../assets/sxa.png" alt="" />
              </div>
              <div class="img" v-show="!gequ.sc">
                <img src="../assets/max.png" alt="" />
              </div>
            </div>
            <div>
              <!-- 歌曲作者 -->
              <span class="listnemin">
                {{ datas.songs[indexyp].ar | niemw }}
              </span>
            </div>
          </li>
        </ul>

        <!-- 第二部分 -->
        <ul class="lift2" border="0" style="cursor: pointer" key="2" v-else>
          <li @click="suoxiao" class="xiala">
            <img src="../assets/fhs.png" alt="" />
          </li>
          <li class="neir">
            <ul class="bufen">
              <li><img src="../assets/max.png" alt="" /></li>
              <li><img src="../assets/gd.png" alt="" /></li>
              <li><img src="../assets/xz.png" alt="" /></li>
              <li><img src="../assets/fsx.png" alt="" /></li>
              <!-- <li><img src="../assets/max.png" alt=""></li> -->
            </ul>
          </li>
        </ul>
      </transition>
      <ul class="gerq">
        <li>
          <div class="img" border="0" style="cursor: pointer">
            <img src="../assets/da.png" alt="" />
          </div>
          <div
            class="img ma"
            border="0"
            style="cursor: pointer"
            @click="shangys"
          >
            <img src="../assets/xys.png" alt="" />
          </div>
          <div class="zhan" border="0" @click="onpals" style="cursor: pointer">
            <div class="img" v-if="play">
              <img src="../assets/bfq.png" alt="" />
            </div>
            <div class="img" v-else border="0" style="cursor: pointer">
              <img src="../assets/zhan.png" alt="" />
            </div>
          </div>
          <div class="img" border="0" style="cursor: pointer" @click="xiays">
            <img src="../assets/xys.png" alt="" />
          </div>
          <div
            class="chi"
            border="0"
            style="cursor: pointer"
            v-if="!lyric"
            @click="onshowlyric"
          >
            <img src="../assets/c.png" alt="" />
          </div>
          <div
            class="chi"
            border="0"
            style="cursor: pointer"
            v-else
            @click="noshowlyric"
          >
            <img src="../assets/dakai.png" alt="" />
          </div>
        </li>
        <!-- 进度条 -->
        <li @mouseover="onProgressBarJ" @mouseleave="onProgressBarJs">
          <!--  -->
          <span class="bofangdata" v-if="datas.songs[0]">{{
            inbofang | bofs
          }}</span>
          <div class="beij">
            <div class="jindun" :style="{ width: ms + '%' }"></div>
            <transition name="el-fade-in-linear" class="jinr">
              <div v-show="shwoprogressBar">
                <el-slider
                  v-model="value3"
                  :show-tooltip="false"
                  @change="ongeqDate"
                ></el-slider>
              </div>
            </transition>
          </div>
          <span v-if="datas.songs[0]">
            <span
              class="datelength"
              v-if="datas.songs[indexyp].lentdate == true"
              >{{ datas.songs[indexyp].dt | onindes }}
            </span>
            <span class="datelength" v-else>
              {{ datas.songs[indexyp].dt | dates }}</span
            >
          </span>
        </li>
      </ul>

      <ul class="bofang">
        <li class="leibiao" @click="libiao" border="0" style="cursor: pointer">
          <img src="../assets/liebiao.png" alt="" />
        </li>
        <li>
          <el-slider v-model="voice" @change="onvoice"></el-slider>
        </li>
        <li class="yinliang">
          <img src="../assets/yla.png" alt="" />
        </li>
      </ul>
    </div>
    <!-- <el-collapse-transition> </el-collapse-transition> -->
    <!-- controls="controls" -->
    <audio ref="audio" id="olg">
      <source :src="urled" type="audio/mp3" />
      <source :src="urled" type="audio/ogg" />
      Your browser does not support this audio format.
    </audio>
    <!-- <audio controls  ></audio> -->
    <el-container>
      <!-- 歌曲面板 -->

      <div :class="[leibiao ? 'liaboapt' : 'noliaboapt']" ref="box1">
        <!-- //右键功能 -->
        <transition name="el-fade-in-linear">
          <div
            class="youjian"
            v-show="isshou"
            :style="{ left: gonna.letX + 'px', top: gonna.letY + 'px' }"
          >
            <ul v-if="info.jieliuData[0]">
              <li @click="listBofan">
                <div class="contes bofang">
                  <div class="imgpl">
                    <img src="../assets/tubiao/24gl-playCircle.png" alt="" />
                  </div>
                  <span>播放</span>
                </div>
              </li>
              <li>
                <div class="pingl contes">
                  <div class="imgpl">
                    <img src="../assets/tubiao/pl.png" alt="" />
                  </div>
                  <span>查看评论</span>
                </div>
              </li>

              <li>
                <div class="contes">
                  <div class="imgpl">
                    <img src="../assets/tubiao/zj.png" alt="" />
                  </div>
                  <span
                    >歌手:{{
                      info.jieliuData[rightClickIindex].ar[0].name
                    }}</span
                  >
                </div>
              </li>
              <li>
                <div class="contes">
                  <div class="imgpl">
                    <img src="../assets/tubiao/zj.png" alt="" />
                  </div>
                  <span
                    >查看专辑</span
                  >
                    <!-- <span
                    >专辑:{{ info.jieliuData[rightClickIindex].al.name }}</span
                  > -->
                </div>
              </li>

              <li>
                <div class="contes">
                  <div class="imgpl">
                    <img src="../assets/tubiao/scj.png" alt="" />
                  </div>
                  <span>收藏到歌单</span>
                </div>
              </li>
              <li>
                <div class="contes">
                  <div class="imgpl">
                    <img src="../assets/tubiao/xz.png" alt="" />
                  </div>
                  <span>下载</span>
                </div>
              </li>
              <li @click="shanc">
                <div class="contes">
                  <div class="imgpl">
                    <img src="../assets/lajt.png" alt="" />
                  </div>
                  <span>从列表中删除</span>
                </div>
              </li>
            </ul>
          </div>
        </transition>
        <!-- 右键功能结束 -->

        <div class="libiao" v-show="leibiao" @click="guanbigon">
          <el-header>
            <h1>当前播放</h1>
            <div class="bofangs">
              <span>共:{{ info.jieliuData.length }}首</span>
              <span
                style="color: rgb(74, 168, 223); cursor: pointer"
                border="0"
                @click="noqingko"
                >清空列表</span
              >
            </div>
          </el-header>
          <el-aside width="400px">
            <div
              :class="[
                index % 2 == 0 ? 'bage' : '',
                index == indexyp ? 'litesBeij' : '',
                'geq',
              ]"
              v-for="(item, index) in info.jieliuData"
              :key="index"
              @contextmenu.prevent="show(index)"
              @mousemove="touchmove"
            >
              <ul class="mingzxig jihuo" v-if="info.jieliuData[0]">
                <li
                  border="0"
                  style="cursor: pointer"
                  v-if="info.jieliuData[0]"
                >
                  <span>{{ item.name }}</span
                  ><span></span>
                </li>
                <li border="0" style="cursor: pointer">
                  <span>{{ item.ar | niemw }}</span>
                </li>
                <li border="0" style="cursor: pointer">
                  <span v-if="item.lentdate == true">
                    {{ item.dt | onindes }}
                  </span>
                  <span v-else>
                    {{ item.dt | dates }}
                  </span>
                </li>
              </ul>
              <!-- <ul class="sjian">
              <li>
                <span>{{ this.datelength | dates }}</span>
              </li>
            </ul> -->
            </div></el-aside
          >
        </div>
      </div>
    </el-container>
    <el-collapse-transition>
      <div v-show="showgec">
        <div :class="[isActive ? 'liaboap' : 'noliaboap']">
          <div class="gequbods">
            <el-container>
              <el-header> <navTobs @getTreeData="guanbi"></navTobs></el-header>
              <el-main>
                <!-- 封面部分 -->

                <ul
                  :class="[
                    ScrollingLyrics ? 'activated' : 'isnoactivated',
                    'gequxingxx',
                  ]"
                  v-if="datas.songs[0]"
                >
                  <li>
                    <ul class="fengmian">
                      <li :class="[play ? 'ming' : '', 'dhua']">
                        <div class="mos">
                          <img src="../assets/changpian.png" alt="" />
                        </div>
                        <div class="imgs">
                          <img
                            src="../assets/tjlb/109951166659498290.jpg"
                            alt=""
                          />
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li class="biaot" v-if="ScrollingLyrics">
                    <ul class="geming">
                      <li>{{ datas.songs[indexyp].name }}</li>
                      <li>{{ datas.songs[indexyp].ar | niemw }}</li>
                      <li class="gec">
                        <div class="yingchang"></div>
                        <!-- 滚动歌词 -->
                        <Scrolling-lyrics
                          :ScrollingLyricsData="lyrictestms"
                        ></Scrolling-lyrics>
                      </li>
                    </ul>
                  </li>
                  <li class="gec" v-else>
                    <!-- 滚动歌词 -->
                    <ul class="geming" v-if="datas.songs">
                      <li>{{ datas.songs[indexyp].name }}</li>
                      <li>{{ datas.songs[indexyp].ar | niemw }}</li>
                    </ul>
                    <span>暂无歌词</span>
                  </li>
                </ul>
              </el-main>
            </el-container>
          </div>
        </div>
      </div>
    </el-collapse-transition>

    <!-- 歌词面板 -->
    <div>
      <Lyric :Lyrictexts="lyrictexst"></Lyric>
    </div>
  </div>
</template>

<script>
import navTobs from "./buds.vue";
import Lyric from "../components/bottom/Lyric.vue";
import ScrollingLyrics from "../components/bottom/ScrollingLyrics.vue";
import API from "../http/API";
export default {
  components: {
    navTobs,
    Lyric,
    ScrollingLyrics,
  },
  data() {
    return {
      // 拖拽进度条的显示隐藏

      shwoprogressBar: false,

      // 音量控制
      voice: 50,
      // 歌曲时间拖动
      value3: 0,
      gequ: {
        img: require("../assets/tjlb/109951166659498290.jpg"),
        gename: "努力工作吧",
        name: "YoungHo",
        sc: false,
      },
      // 当前歌曲播放
      inbofang: "00:00",
      // 歌曲百分比
      ms: 0,
      ge: require("../assets/yy/努力工作吧.mp3"),
      datelength: "00",
      play: true,
      onsetInterval: "",
      // 歌曲封面
      intoge: false,
      // 歌词面板的显示
      showgec: false,
      // 播放列表显示
      show3: true,
      isActive: true,
      liaobo: false,
      indexst: 0,
      leibiao: false,
      onpalsle: 0,
      //要播放的歌曲
      datas: {
        songs: [],
      },
      info: {
        jieliuData: [],
      },
      //当前播放的音频是哪一条
      indexyp: 0,
      urled: "",
      // 实例播放器
      au: "",
      //点击上一首就让他进行播放下一首也是同样的道理
      iszdo: false,

      //右键功能
      isshou: false,

      //鼠标移动事件
      //鼠标在他移动的位置中显示
      gonna: {
        letY: 150,
        letX: 150,
      },
      hmgonna: {
        letY: 0,
        letX: 0,
      },

      //获取元素内部等待大小
      box1: {
        Height: 0,
        Width: 0,
        Top: 0,
        Left: 0,
      },
      //  显示隐藏歌词
      lyric: true,
      //全部歌词
      lyrictestms: [],
      // 不转换歌词时间的
      datasdawdw: [],
      //当前时间段的歌词
      lyrictexst: [],
      //右键缓存下来的index歌曲详情列表单号
      rightClickIindex: 0,

      // 滚动歌词的面板有歌词就让显示滚动的面板
      ScrollingLyrics: true,

      // 当前播放的时间
    };
  },
  watch: {
    lyrictestms(e) {
      // console.log(e);
    },
  },
  created() {
    // this.$store.commit("onlyricdate",0);
  },

  mounted() {
    localStorage.removeItem("bofanData");
    // alert("刷新")
    this.au = document.createElement("audio");
    this.$store.commit("geq");

    // console.log(this.$store.state.bofang);
    if (this.$store.state.bofang != null) {
      if (this.$store.state.bofang.songs.length > 0) {
        this.datas.songs = this.$store.state.bofang.songs;
      } else {
        this.datas = false;
      }
      if (this.datas == null) {
        this.datas = false;
      } else {
        console.log("进入工作状态额");
        this.fenl().then(() => {
          this.inUrl().then(() => {});
        });
      }
    }
    // console.log(this.datas.songs);
    this.$store.watch(
      (state, getters) => {
        return state.bofang;
      },
      (e) => {
        this.datas = this.$store.state.bofang;
        this.fenl().then(() => {
          this.inUrl().then(() => {
            this.onpals();
          });
        });
      }
    );

    //监听窗口发生变化

    window.onresize = () => {
      setTimeout(() => {
        console.log("窗口发生改变了");
        this.juli();
      }, 300);
    };

    setTimeout(() => {
      this.show3 = !this.show3;
    });
    //立即播放
    this.$store.watch(
      (state, getters) => {
        return state.Playimmediately;
      },
      (e) => {
        // console.log(e);
        //判断立即播放的歌曲在不在列表里面
        // console.log(this.info.jieliuData);
        let id = 0;

        // id = this.info.jieliuData[index].indexOf(e.id);

        if (this.info.jieliuData.length == 0) {
          // (this.indexyp = 0),
          this.bofa(e)
            .then(() => {})
            .catch((e) => {
              // console.log(e);
            });
          return;
        } else {
          id = this.info.jieliuData
            .map((a) => {
              // console.log();
              return a.id;
            })
            .indexOf(e.id);

          // console.log(id);
          if (id == -1) {
            // 因为做了分流处理所有要在原始数据和分流后的数据做插入处理
            //原生数据   this.datas
            //分流后面的数据     this.info.jieliuData
            // this.info.jieliuData.splice(this.indexyp + 1, 0, e);
            this.datas.songs.splice(this.indexyp + 1, 0, e);
                    this.info.jieliuData=this.datas.songs
            localStorage.setItem("bofang", JSON.stringify(this.datas));
            // console.log(this.info.jieliuData[1]);
            this.xiays();
          } else {
            // this.info.jieliuData(index, index);
            this.inleibiao(id);
            localStorage.setItem("bofang", JSON.stringify(this.datas));
          }
          this.onlyric();
        }
      }
    );
    //在播放列表中的下一首播放
    this.$store.watch(
      (state, getters) => {
        return state.TheFollowingPiece;
      },
      (e) => {

        // console.log(e)


        let id = 0;

        // id = this.info.jieliuData[index].indexOf(e.id);

        id = this.info.jieliuData
          .map((a) => {
            // console.log();
            return a.id;
          })
          .indexOf(e.id);

        // console.log(id);

        //判断下一首播放的歌曲在不在列表里面

        if (id == -1) {
          // 因为做了分流处理所有要在原始数据和分流后的数据做插入处理
          //原生数据   this.datas
          //分流后面的数据     this.info.jieliuData
          // this.info.jieliuData.splice(this.indexyp + 1, 0, e);
          this.datas.songs.splice(this.indexyp + 1, 0, e);
            this.info.jieliuData=this.datas.songs
          localStorage.setItem("bofang", JSON.stringify(this.datas));
        } else {
          if (id != 0) {
            let jil = this.info.jieliuData[id];
            // console.log(this.info.jieliuData[id]);
            this.datas.songs.splice(id, 1);
            this.info.jieliuData.splice(id, 1);
            // console.log(this.info.jieliuData);
            this.info.jieliuData.splice(this.indexyp + 1, 0, jil);
            this.datas.songs.splice(this.indexyp + 1, 0, jil);
          }

          localStorage.setItem("bofang", JSON.stringify(this.datas));
        }
        this.onlyric();
      }
    );

    // 添加进来的歌单
    this.$store.watch(
      (state, getters) => {
        return state.addbofang;
      },
      (e) => {
        this.info.jieliuData = this.info.jieliuData.concat(e);
      }
    );

    //  获取到歌曲

    // this.onlyric();
  },

  methods: {
    // 清空列表
    noqingko() {
      this.datas.songs = [];
      this.info.jieliuData = [];
      localStorage.removeItem("bofang", JSON.stringify(this.datas));
      clearInterval(this.onsetInterval);
      // au.pause(); //停止
      this.play = true;
      // localStorage.setItem("bofanData", this.inbofang);
      this.au.pause();
      this.ms = 0;
    },

    // 当播放歌单中没有歌的时候
    async bofa(e) {
      setTimeout(() => {
        // let ads = ;

        this.datas.songs.push(e);
        this.info.jieliuData.push(e);
        this.info.jieliuData = this.info.jieliuData;

        // console.log(this.datas.songs);
        // console.log(this.datas.songs[this.indexyp].name);
        localStorage.setItem("bofang", JSON.stringify(this.datas));
        // this.onlyric();

        this.inUrl()
          .then(() => {
            this.onlyric();
            // this.onpals();
          })
          .catch((e) => {
            // console.log(e);
          });
      }, 800);
    },

    // 拖拽进度条
    onProgressBarJ() {
      // 鼠标移进来
      this.shwoprogressBar = true;
    },
    onProgressBarJs() {
      // 鼠标移出去
      this.shwoprogressBar = false;
    },

    // 更改歌曲播放的时间
    ongeqDate(e) {
      let indexs = "";
      let value = "";
      let mi = "";
      let datae = e / 100;

      if (this.datas.songs[this.indexyp].lentdate !== true) {
        // console.log(datae);
        value = this.datas.songs[this.indexyp].dt * datae;
        // console.log(value);
        let min = Math.floor((value / 1000 / 60) << 0);
        let sec = Math.floor((value / 1000) % 60);

        mi = min * 60 + sec;
        // console.log(mi + "秒");
      } else {
        mi = value = this.datas.songs[this.indexyp].dt * datae;
      }

      for (let index = 0; index < this.lyrictestms.length; index++) {
        if (this.lyrictestms[index].time - mi <= 0.2) {
          indexs = index;
        }
      }

      // console.log(indexs);

      if (this.play == true) {
        localStorage.setItem("bofanData", mi);
        this.$store.commit("onlyricdate", mi);
      } else {
        this.au.currentTime = mi;
        this.$store.commit("onlyricdate", mi);
      }

      // this.onblipos();
      // console.log(this.datas.songs[this.indexyp].dt + "总时间");
    },
    // 更改声音大小

    onvoice(e) {
      // console.log(e / 100);
      this.au.volume = e / 100;
    },

    //获取到歌词
    async onlyric() {
      return this.$get(API.LYRIC, {
        id: this.datas.songs[this.indexyp].id,
      }).then((e) => {
        // console.log();
        if (e.code == 200) {
          // console.log(e);
          // this.lyrictestms = ;
          // console.log(this.lyrictestms);
          // this.lyrictestms = this.lyrictestms.replace(/\[]/g, "");
          //  console.log( this.lyrictestms)
          // console.log(  this.lyrictestms.split(']'))
          this.formatLyric(e.lrc.lyric);
          this.ScrollingLyrics = true;
          return;
        }

        this.ScrollingLyrics = false;
      });
    },

    //整理歌词
    formatLyric(text) {
      // console.log(text);
      this.lyrictestms = [];
      this.lyrictexst = [];
      // 不转换的
      this.datasdawdw = [];
      let arr = text.split("\n"); //原歌词文本已经换好行了方便很多，我们直接通过换行符“\n”进行切割
      let row = arr.length; //获取歌词行数
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i]; //现在每一行格式大概就是这样"[00:04.302][02:10.00]hello world";
        let temp_arr = temp_row.split("]"); //我们可以通过“]”对时间和文本进行分离
        let text = temp_arr.pop(); //把歌词文本从数组中剔除出来，获取到歌词文本了！
        //再对剩下的歌词时间进行处理
        temp_arr.forEach((element) => {
          let obj = {};
          let objs = {};
          let time_arr = element.substr(1, element.length - 1).split(":"); //先把多余的“[”去掉，再分离出分、秒

          // console.log(time_arr)
          // let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); //把时间转换成与currentTime相同的类型，方便待会实现滚动效果
          let s = Number(time_arr[0]) * 60 + Number(time_arr[1]); //把时间转换成与
          objs.text = text;
          objs.s = Number(time_arr[0]) * 60 + Number(time_arr[1]);
          //   let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); /
          obj.time = s;
          obj.text = text;
          this.datasdawdw.push(objs);
          this.lyrictestms.push(obj); //每一行歌词对象存到组件的lyric歌词属性里
        });
      }
      this.lyrictestms.sort(this.sortRule); //由于不同时间的相同歌词我们给排到一起了，所以这里要以时间顺序重新排列一下
      // console.log(this.lyrictestms);
      this.datasdawdw.sort(this.sortRule);
      // this.$store.commit("setLyric", this.lyric); //把歌词提交到store里，为了重新进入该组件时还能再次渲染
      // console.log(this.datasdawdw);
      //  先把前面两条数据放进去  const lyrictestms = JSON.parse(JSON.stringify(this.lyrictestms)) ;
      // const lyrictestms = this.lyrictestms;
      const lyrictestms = JSON.parse(JSON.stringify(this.lyrictestms));
      for (let index = 0; index < 2; index++) {
        this.lyrictexst.push(lyrictestms[index]);
      }
    },
    sortRule(a, b) {
      //设置一下排序规则
      return a.time - b.time;
    },
    //进行歌词的比对
    ongecbid(e) {
      const lyrictestms = JSON.parse(JSON.stringify(this.lyrictestms));
      for (let index = 2; index < lyrictestms.length; index++) {
        if (lyrictestms[index].time - e <= 1) {
          if (index % 2 == 0) {
            // console.log( this.lyrictexst)
            this.lyrictexst[1].text = lyrictestms[index].text;
          } else {
            this.lyrictexst[0].text = lyrictestms[index].text;
            // this.$forceUpdate()
          }
        }
      }
    },
    //关闭右键功能列表的单击事件
    guanbigon() {
      // console.log("关闭");
      this.isshou = false;
    },

    //从列表中删除
    shanc() {
      if (this.rightClickIindex == 0) {
        this.info.jieliuData.splice(0, 1);
        this.datas.songs.splice(0, 1);
        if (this.indexyp > this.rightClickIindex) {
          this.indexyp = this.indexyp - 1;
        }
      } else {
        this.info.jieliuData.splice(this.rightClickIindex, 1);

        this.datas.songs.splice(this.rightClickIindex, 1);
        if (this.indexyp > this.rightClickIindex) {
          this.indexyp = this.indexyp - 1;
        }
      }
      this.isshou = false;
      localStorage.setItem("bofang", JSON.stringify(this.datas));
    },
    //播放列表中的播放功能
    listBofan() {
      this.inleibiao(this.rightClickIindex);
    },
    //列表播放作为封装点

    async inleibiao(e) {
      // console.log(e);

      if (e != undefined) {
        if (this.indexyp == e) {
          return this.$message({
            message: "歌曲正在播放",
            type: "success",
          });
        }
        this.indexyp = e;
        await this.inUrl();
        this.onlyric();
        localStorage.removeItem("bofanData");
        this.play = true;
        this.isshou = false;
        this.onpals();
      }
    },
    //获取元素距离
    juli() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.box1.Height = this.$refs.box1.offsetHeight;
          this.box1.Width = this.$refs.box1.offsetWidth;
          this.box1.Top = this.$refs.box1.offsetTop;
          this.box1.Left = this.$refs.box1.offsetLeft;
        });
      }, 500);
    },

    //右键功能
    show(index) {
      this.rightClickIindex = index;

      if (this.isshou == true) {
        if (
          this.gonna.letX != this.hmgonna.letX &&
          this.gonna.letY != this.hmgonna.letY
        ) {
          this.isshou = false;
          this.gonna.letX = this.hmgonna.letX;
          this.gonna.letY = this.hmgonna.letY;
        }
      }

      this.isshou = true;
    },
    //鼠标移动事件
    touchmove(e) {
      // x轴是宽
      // y是高
      // console.log(e.clientX + "X轴");

      let letY = e.clientY - this.box1.Top - this.box1.Height / 2 + 330;
      let letX = e.clientX - this.box1.Left - this.box1.Width / 2 + 40;

      if (this.isshou == false) {
        if (letY <= 100) {
          this.gonna.letY = letY;
          // + 240;
          //  this.hmgonna.letY = letY + 290;

          if (letX <= 0) {
            return (this.gonna.letX = letX);
          }
          this.gonna.letX = letX + 10;
        } else {
          this.gonna.letY = letY + 10;
          if (letX <= 0) {
            return (this.gonna.letX = letX);
          }
          this.gonna.letX = letX;
        }
        return;
      }

      if (letY <= 100) {
        this.hmgonna.letY = letY;
        // + 240;
        //  this.hmgonna.letY = letY + 290;

        if (letX <= 0) {
          return (this.hmgonna.letY = letY);
        }
        this.hmgonna.letX = letX - 5;
      } else {
        this.hmgonna.letY = letY - 10;
        if (letX <= 0) {
          return (this.hmgonna.letX = letX - 260 / 2);
        }
        this.hmgonna.letX = letX;
      }
    },

    //下一首
    async xiays(e) {
      if (e != true) {
        if (this.indexyp == this.datas.songs.length) {
          return this.$message({
            message: "这个已经是最后面一首了呀",
            type: "success",
          });
        }
      }
      this.zhant();
      localStorage.removeItem("bofanData");

      this.inbofang = "00:00";
      this.ms = 0;
      this.indexyp += 1;

      this.iszdo = true;

      await this.inUrl();
      this.onlyric();
      this.play = true;
      this.onpals();
    },
    //上一首
    async shangys() {
      if (this.indexyp == 0) {
        return this.$message({
          message: "这个已经是第一首了呀",
          type: "success",
        });
      }

      this.zhant();
      this.inbofang = "00:00";
      this.ms = 0;
      localStorage.removeItem("bofanData");
      this.indexyp -= 1;
      this.iszdo = true;
      this.play = true;
      await this.inUrl();
      this.onlyric();
      this.onpals();
    },
    //获取当前要播放的歌曲url
    async inUrl() {
      // console.log(this.datas.songs);
      // console.log(this.indexyp);
      // console.log(this.datas.songs[this.indexyp]);
      return this.$get(API.SONG_URL, {
        id: this.datas.songs[this.indexyp].id,
      })
        .then((e) => {
          // console.log(e);
          if (e.code == 200) {
            if (e.data[0].code == 200) {
              this.urled = e.data[0].url;

              if (this.iszdo == false) {
                return this.$message({
                  message: "歌曲准备就绪，点击下方播放按钮开始播放",
                  type: "success",
                });
              }
            } else {
              this.$message.error("播放失败请稍后在尝试，3秒内切换下一首");

              setTimeout(() => {
                this.xiays();
              }, 3000);
            }
          }
        })
        .catch((e) => {
          return this.$message({
            message: "出错了呀",
            type: "success",
          });
        });
    },

    async onpals() {
      await this.onlyric();

      console.log("开始播放了");
      this.au.volume = this.voice / 100;
    
      this.au.src = this.urled;
      let datas = localStorage.getItem("bofanData");

      if (this.urled == "") {
       this.$message({
          message: "歌曲还没有准备好呀！请稍后点击播放",
          type: "warning",
        });
        await this.inUrl()
        return
      }
      // this.$refs.audio.currentTime = 0; //从头开始播放
      // this.onpalsle++;
      if (this.play == false) {
        this.zhant();
      } else {
        if (datas != 0 || datas != null) {
          this.au.currentTime = datas;
          this.onblipos();
        } else {
          this.au.currentTime = 0;
          this.onblipos();
        }
      }
    },
    zhant() {
      clearInterval(this.onsetInterval);
      // au.pause(); //停止
      this.play = true;
      localStorage.setItem("bofanData", this.inbofang);
      this.au.pause();
    },

    //正式开始播放功能
    onblipos() {
      // console.log("开始咯");
      let fen = 0;

      if (
        this.datas.songs[this.indexyp].lentdate == false ||
        this.datas.songs[this.indexyp].lentdate == undefined ||
        this.datas.songs[this.indexyp].lentdate == null
      ) {
        // console.log(this.datas.songs[this.indexyp].dt);
        let my_time = this.datas.songs[this.indexyp].dt;

        var days = my_time / 1000 / 60 / 60 / 24;
        var daysRound = Math.floor(days);
        var hours = my_time / 1000 / 60 / 60 - 24 * daysRound;
        var hoursRound = Math.floor(hours);
        var minutes =
          my_time / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound;
        var minutesRound = Math.floor(minutes);
        var seconds =
          my_time / 1000 -
          24 * 60 * 60 * daysRound -
          60 * 60 * hoursRound -
          60 * minutesRound;

        var time = hoursRound + ":" + minutesRound + ":" + seconds;
        fen = parseInt(minutesRound * 60 + seconds);
      }

      //时间格式下的秒

      clearInterval(this.onsetInterval);
      this.au.load();
      let playPromise = this.au.play();
      if (playPromise !== undefined) {
        playPromise
          .then(() => {
            this.au.play();
          })
          .catch(() => {});
      }

      this.onsetInterval = setInterval(() => {
        this.inbofang = this.au.currentTime; //获取当前播放时间
        // console.log(this.inbofang);
        this.$store.commit("onlyricdate", this.inbofang);
        // this.inbofang = (this.au.currentTime / 60).toFixed(2); //获取当前播放时间
        // console.log(this.inbofang + "=======获取当前播放时间");
        // console.log(
        // (this.datas.songs[this.indexyp].dt % (1000 * 60)) / 1000 + "转换成秒"
        // );
        if (this.datas.songs[this.indexyp].lentdate == true) {
          this.ms = (this.inbofang / this.datas.songs[this.indexyp].dt) * 100;
          this.value3 = this.ms;
          this.ongecbid(this.inbofang);
        } else {
          this.ms = (this.inbofang / fen) * 100;
          this.value3 = (this.inbofang / fen) * 100;
          this.ongecbid(this.inbofang);
          // console.log(this.ms);
        }

        if (this.ms >= 100) {
          // console.log("停止了")
          // console.log(this.indexyp)
          //           console.log(this.datas.songs.length)
          if (this.indexyp == this.datas.songs.length - 1) {
            this.zhant();
          } else {
            this.xiays(true);
          }
          localStorage.removeItem("bofanData");

          clearInterval(this.onsetInterval);
        }

        // 数量÷总数×100=百分比
      }, 100);

      this.play = false;
    },
    // 鼠标移入事件
    jingr() {
      this.intoge = true;
    },
    // 鼠标移出
    chuq() {
      this.intoge = false;
    },
    qugequ() {
      this.isActive = true;
      this.show3 = true;
      this.showgec = true;
      let screenHeight = window.innerHeight;
    },
    //关闭歌词面板
    suoxiao() {
      this.isActive = false;
      this.show3 = false;
      setTimeout(() => {
        this.showgec = false;
      }, 300);
    },
    guanbi() {
      this.isActive = false;
      this.show3 = false;
      setTimeout(() => {
        this.showgec = false;
      }, 300);
    },
    libiao() {
      this.indexst++;
      this.juli();

      if (this.indexst % 2 == 0) {
        this.leibiao = false;
      } else {
        this.leibiao = true;
      }
    },
    //分流显示
    async fenl() {
      this.info.jieliuData = [];

      // console.log(this.datas.songs);
      if (this.datas.songs.length >= 30) {
        return this.dsqers(this.datas.songs, 30).then((e) => {
          // console.log(e);

          // console.log(this.info.jieliuData);
          let index = 0;
          this.info.jieliuData = this.info.jieliuData.concat(e[index]);
          this.$nextTick(() => {
            this.dinfsq = setInterval(() => {
              index++;

              this.info.jieliuData = this.info.jieliuData.concat(e[index]);
              // console.log(this.jieliuData);
              if (this.info.jieliuData.length == this.datas.songs.length) {
                return clearInterval(this.dinfsq);
              }
            }, 550);
            this.$forceUpdate();
          });

          //定时器执行
        });
      } else {
        this.info.jieliuData = this.datas.songs;
      }
    },
    //节流处理
    async dsqers(arr, num) {
      // console.log(arr);
      //arr是你要分割的数组，num是以几个为一组
      let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
      for (let i = 0; i < arr.length; ) {
        //注意：这里与for循环不太一样的是，没有i++
        arr[i].dt = parseInt(arr[i].dt / 1000);
        newArr.push(arr.slice(i, (i += num)));
      }
      return newArr;
    },
    onshowlyric() {
      this.lyric = true;

      this.$store.commit("onshwoLyric", this.lyric);
      // console.log("点击");
    },
    noshowlyric() {
      this.lyric = false;

      this.$store.commit("onshwoLyric", this.lyric);
      // console.log("关闭");
    },
  },
  filters: {
    bofs(times) {
      // console.log(times);
      let t;
      var hour = Math.floor(times / 3600);
      var min = Math.floor(times / 60) % 60;
      var sec = times % 60;
      if (times == "00:00") {
        t = "00:00";
        return t;
      }
      if (times > -1) {
        if (hour != 0) {
          if (hour < 10) {
            t = "0" + hour + ":";
          } else {
            t = hour + ":";
          }

          if (min < 10) {
            t += "0";
          }
          t += min + ":";
          if (sec < 10) {
            t += "0";
          }
          t += sec.toFixed(2);
          t = t.substring(0, t.length - 3);
          return t;
        } else {
          //计算分钟
          //算法：将秒数除以60，然后下舍入，既得到分钟数
          var h = "";
          h = Math.floor(times / 60);
          //计算秒
          //算法：取得秒%60的余数，既得到秒数
          let s = parseInt(times % 60);
          //将变量转换为字符串
          h += "";
          s += "";
          //如果只有一位数，前面增加一个0
          h = h.length == 1 ? "0" + h : h;
          s = s.length == 1 ? "0" + s : s;
          return h + ":" + s;
        }
      }
    },

    dates(value1) {
      let result = parseInt(value1);
      let h =
        Math.floor(result / 3600) < 10
          ? "0" + Math.floor(result / 3600)
          : Math.floor(result / 3600);
      let m =
        Math.floor((result / 60) % 60) < 10
          ? "0" + Math.floor((result / 60) % 60)
          : Math.floor((result / 60) % 60);
      let s =
        Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);
      result = `${m}:${s}`;
      return result;
    },
    niemw(val) {
      // console.log(val.length);
      if (val.length == 1) {
        // console.log(val[0].name)
        return val[0].name;
      } else {
        let name;
        for (let index = 0; index < val.length; index++) {
          if (index == 0) {
            name = val[index].name;
          } else {
            name += "/" + val[index].name;
          }
        }
        return name;
      }
    },
    onindes(indes) {
      // console.log(indes)
      const h = parseInt(indes / 3600);
      const minute = parseInt((indes / 60) % 60);
      const second = Math.ceil(indes % 60);

      const hours = h < 10 ? "0" + h : h;
      const formatSecond = second > 59 ? 59 : second;
      return `${hours > 0 ? `${hours}:` : ""}${
        minute < 10 ? "0" + minute : minute
      }:${formatSecond < 10 ? "0" + formatSecond : formatSecond}`;
    },
    dates(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + ":" + seconds;
    },

    // 字体显示省略号
    texst(value) {
      // console.log(value);
      const nums = "10"; // 设置限定字数,默认为5
      if (!value) return "";
      if (value.length > nums) {
        return value.slice(0, nums) + "...";
      }
      return value;
    },
  },

  //页面销毁的时候把今天听的歌保存到本地缓存去
  beforeDestroy() {
    if (this.datas.songs.length > 0) {
      localStorage.setItem("bofang", JSON.stringify(this.datas));
    }
  },
};
</script>

<style lang="less" scoped>
.yingchang {
  position: absolute;
  right: -4px;
  z-index: 5;
  top: 0;
  height: 500px;
  width: 5px;
  // border: 1px solid #000;
  // background: linear-gradient(rgba(114, 114, 114, 0.918), rgba(255, 255, 255, 0.589));
}

// 播放封面的歌词面板
.isnoactivated {
  width: 500px;
}
.activated {
  width: 900px;
}
// 激活歌词的
.chi {
  width: 20px;
  height: 20px;
  display: flex;
  align-content: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
  }
}
// 当前播放的歌曲的颜色
.litesBeij {
  background-color: rgba(121, 118, 118, 0.356) !important;
  color: rgb(231, 45, 45);
}
//右键功能

.youjian {
  position: absolute;
  z-index: 1000;
  height: 260px;
  width: 150px;
  border-radius: 5px;
  // border: 1px solid #000;
  box-shadow: 0 0 15px rgba(73, 73, 73, 0.616);
  background-color: #fdfdfd;
  ul {
    margin-top: 10px;
    // height: 100%;
    width: 100%;
    // border: 1px solid #000;
    li {
      // margin-top: 10px;
      cursor: pointer;
      &:hover {
        background-color: #eeeeee;
      }
      &:nth-child(2) {
        border-bottom: 1px solid rgb(218, 218, 218);
      }
      height: 35px;
      width: 100%;
      .contes {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        span {
          flex: 1;
          overflow: hidden;

          white-space: nowrap;

          text-overflow: ellipsis;

          -o-text-overflow: ellipsis;
        }
        .imgpl {
          width: 20px;
          height: 20px;
          // border: 1px solid #000;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .pingl {
        // border: 1px solid #000;
      }
    }
  }
}

.bage {
  background-color: rgba(218, 218, 218, 0.363);
}
.bofangs {
  height: 30px;
  border-bottom: 1px solid rgb(189, 188, 187);
  // margin-right: 20px;
  display: flex;
  justify-content: space-between;
  span {
    display: block;
    // margin-left: 20px;
  }
}

.geq {
  width: 100%;
  // background-color: #f8f8f8;
  .el-main {
    height: 100% !important;
    border: 1px solid #000;
    min-width: 800px !important;
  }
  &:hover {
    // border-radius: 5px;
    background-color: #c9c9c99f;
  }
  line-height: 40px;
  // height: 40px;
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  .mingzxig {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 20px;
    // width: 200px;

    margin-right: 20px;
    li {
      //  width: 280px;

      // height: 62px;

      // margin: 50px auto;

      overflow: hidden;

      text-overflow: ellipsis;

      display: -webkit-box;

      -webkit-line-clamp: 1;

      -webkit-box-orient: vertical;
      &:nth-child(1) {
        flex: 1;
      }
      &:nth-child(2) {
        width: 100px;

        // border: 1px solid #000;
      }
      &:nth-child(3) {
        width: 50px;
        // border: 1px solid #000;
      }
    }
  }
  .sjian {
    // margin-right: 20px;
    border: 1px solid #000;
    li {
      span {
        color: rgb(182, 182, 182);
      }
    }
  }
}

// 播放列表
.liaboapt {
  height: 80vh;
  // box-shadow: 0 0 10px rgb(73 73 1.17741935%);
  // width: 350px;
  // min-width: 350px !important;
  // background: linear-gradient(
  //   rgba(126, 126, 126, 0.425),
  //   rgba(255, 255, 255, 0.589)
  // );
  background-color: #ffffff;
  position: fixed;
  // overflow: hidden;
  right: 0;
  bottom: 11vh;
  // box-shadow: rgba(163, 163, 163, 0.438) 0px 0px 20px 5px;
  box-shadow: rgba(107, 107, 107, 0.438) 0px 0px 10px 6px;
  // border-bottom: 25px solid rgba(199, 196, 196, 0.432);
  z-index: 55;
  animation: lbmyfirst 0.3s;
  // -webkit-transition: all 0.28s ease-in 0.1s;
  // transition: all 0.28s ease-in 0.1s;
  transition-timing-function: linear;
  // 动画结束让他保持不动
  animation-fill-mode: forwards;
}
.noliaboapt {
  height: 80vh;
  /deep/.el-header {
    display: none;
  }
  /deep/.el-main {
    display: none;
  }
  // width: 350px;
  background: linear-gradient(
    rgba(126, 126, 126, 0.425),
    rgba(255, 255, 255, 0.589)
  );

  background-color: #ffffff;
  position: absolute;

  // bottom: 0;
  right: 0;
  bottom: 5vh;
  z-index: 99;
  animation: lemyfirstt 0.3s;
}
@keyframes lemyfirstt {
  0% {
    opacity: 1;
    width: 400px;
  }

  100% {
    opacity: 0;
    width: 0;
    background-color: rgba(196, 196, 196, 0.479);
  }
}
@keyframes lbmyfirst {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 400px;
    // margin-top: 20px;
  }
}
.libiao {
  display: flex;
  flex-direction: column;
  // box-shadow: 0 0 10px rgb(73 73 73 / 62%);
  /deep/.el-header {
    height: 100%;
  }
  /deep/.el-aside {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    flex: 1;
  }

  // margin-top: 20px;

  // margin: 30px 20px 20px 20px;
  // border: 1px solid #000;
  //  height: 100%;
  // border: 1px solid #000;
  height: 80vh;
  h1 {
    font-size: 20px;
    font-weight: 550;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .el-header {
    background: none !important;
    height: 100px !important;
  }
}
// 当前播放左下角的人名
.listnemin {
  width: 180px;
  display: block;
  white-space: nowrap;
  /*溢出部分文字隐藏*/
  overflow: hidden;
  /*溢出部分省略号处理*/
  text-overflow: ellipsis;
}
//
.gequbods {
  .el-header {
    background-color: transparent;
  }
  .el-container {
    height: 100%;
    position: relative;
    background-color: transparent;
  }
  .el-main {
    background-color: transparent;
    color: #333;
    // text-align: center;
    // line-height: 160px;
    min-width: 800px;
    padding: 0px !important;
    margin-top: 40px;
    margin-right: 30px;
    margin-left: 20px;
    height: 100vh;
  }
  .gequxingxx {
    // justify-content: center;
    // position: relative;
    margin-top: 50px;

    // border: 1px solid #000;
    margin: 0 auto;
    height: 500px;
    justify-content: space-between;
    // border: 1px solid #000;
    display: flex;
    li {
      &:nth-child(1) {
        display: flex;
        justify-content: center;
        align-items: center;
        .fengmian {
          li {
            // margin-right: 15vw;
            &:nth-child(1) {
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              .mos {
                position: absolute;
                width: 250px;
                height: 250px;
                // border: 1px solid #000;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .imgs {
                position: absolute;
                z-index: 999;
                width: 160px;
                height: 160px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              background-size: 150px 150px;
              width: 280px;
              height: 280px;
              border-radius: 50%;
              background-color: rgba(173, 173, 173, 0.644);

              // border: 1px solid #000;
            }
          }
        }
      }
    }
    .biaot {
      // margin: 0 auto;
      // position: absolute;
      .geming {
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        li {
          &:nth-child(1) {
            font-size: 30px;
            margin-bottom: 20px;
          }
          &:nth-child(2) {
            margin-bottom: 20px;
          }
        }
      }
    }
    // 歌词没有歌词的时候
    .gec {
      position: relative;
      // min-width: 200px;
      // position: relative;
      display: flex;
      align-items: center;
      // justify-content: center;
      flex-direction: column;
      .geming {
        // border: 1px solid #000;
        height: 250px;
        display: flex;
        align-items: center;
        flex-direction: column;
        // justify-content: center;
        li {
          &:nth-child(1) {
            font-size: 30px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}
// 旋转动画
.dhua {
  animation: rotation 8s linear infinite;

  animation-fill-mode: forwards;
}
.ming {
  animation-play-state: paused;
}
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

.ma {
  transform: rotate(180deg);
}
.zhan {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(218, 218, 218, 0.534);
  //   border: 1px solid #000;
  .img {
    margin-right: 4px;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    // border: 1px solid #000;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.img {
  margin-left: 5px;
  width: 18px;
  height: 18px;
  // border: 1px solid #000;

  img {
    width: 100%;
    height: 100%;
  }
}
.bottom {
  // width: 100vw;
  // border: 1px solid #000;
  // border-top: 2px solid salmon;
  height: 100%;
  background-color: #ffffff;
  position: relative;
  .neiro {
    position: absolute;
    z-index: 60;
    width: 100%;
    height: 80px;

    //   border: 1px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .gerq {
      height: 70%;
      // width: 150px;
      display: flex;
      margin: 0 auto;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      // border: 1px solid #000;
      li {
        &:nth-child(1) {
          width: 300px;
          height: 30px;
          // border: 1px solid #000;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        &:nth-child(2) {
          display: flex;
          align-items: center;

          justify-content: space-between;
          .datelength {
            font-size: 15px;
            color: rgb(133, 133, 133);
            margin-left: 10px;
          }
          .bofangdata {
            // margin-left: 20px;
            font-size: 15px;
            color: rgb(133, 133, 133);
            margin-right: 10px;
            // border: 1px solid #000;
          }
          .beij {
            position: relative;
            width: 450px;
            height: 3px;
            border-radius: 3px;
            background-color: rgb(199, 199, 199);
            .jindun {
              height: 3px;
              //  border: 1px solid #000;
              background-color: rgb(241, 56, 56);
              border-radius: 3px;
              position: relative;
            }

            /deep/.el-slider {
              position: absolute !important;
              width: 100% !important;
              z-index: 2;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              .el-slider__runway {
                .el-slider__bar {
                  background-color: #db6a6a;
                }
                .el-slider__button-wrapper {
                  .el-slider__button {
                    height: 10px !important;
                    width: 10px !important;
                  }
                }
              }
            }
          }
        }
      }
    }
    .bofang {
      height: 70%;
      width: 320px;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;

      li {
        width: 120px;
        height: 100%;

        display: flex;
        align-items: center;
        // border: 1px solid #000;
        &:nth-child(1) {
          margin-left: 30px;
        }
        &:nth-child(2) {
          margin-left: 10px;
          // transform: rotate(180deg);
        }
        &:nth-child(3) {
          // margin-left: 10px;
        }
        .el-slider {
          // transform: rotate(180deg);
          width: 100% !important;
          /deep/.el-slider__button {
            width: 10px !important;
            height: 10px !important;
          }
          /deep/.el-slider__bar {
            background-color: #db6a6a;
          }
        }
      }
      .yinliang {
        width: 27px;
        height: 27px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .leibiao {
        width: 23px;
        height: 23px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      // border: 1px solid #000;
    }
    .lift {
      width: 320px;
      height: 70%;
      // width: 150px;
      // border: 1px solid #000;
      display: flex;
      align-items: center;
      li {
        &:nth-child(1) {
          width: 60px;
          height: 100%;
          border-radius: 5px;
          overflow: hidden;
          margin-right: 10px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .jinr {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 999;
            top: 0;
            right: 0;
            background-color: rgba(10, 10, 10, 0.295);
            // border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
            // filter: blur(10px);
            img {
              transform: rotate(90deg);
              width: 40%;
              height: 40%;
            }
          }
        }
        &:nth-child(2) {
          // width: 60px;
          display: flex;
          flex-direction: column;
          // border: 1px solid #000;
          height: 80%;
          border-radius: 5px;
          overflow: hidden;
          margin-right: 10px;
          justify-content: space-between;
          .texs {
            display: flex;
            align-items: center;

            .img {
              margin-left: 5px;
              width: 18px;
              height: 18px;
              // border: 1px solid #000;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
.liaboap {
  width: 100%;
  background: linear-gradient(
    rgba(126, 126, 126, 0.425),
    rgba(255, 255, 255, 0.589)
  );
  background-color: #ffffff;
  position: fixed;
  right: 0;
  bottom: 0;

  z-index: 50;
  animation: myfirst 0.3s;
  // -webkit-transition: all 0.28s ease-in 0.1s;
  // transition: all 0.28s ease-in 0.1s;
  transition-timing-function: linear;
  // 动画结束让他保持不动
  animation-fill-mode: forwards;
}
.noliaboap {
  // height: 94vh;
  width: 100%;
  background: linear-gradient(
    rgba(126, 126, 126, 0.425),
    rgba(255, 255, 255, 0.589)
  );
  background-color: #ffffff;
  position: absolute;
  right: 0;
  bottom: 80px;

  z-index: 99;
  animation: myfirstt 0.3s;
}
@keyframes myfirstt {
  0% {
    opacity: 1;
    height: 100vh;
  }

  100% {
    opacity: 0;
    height: 0vh;
    background-color: aqua;
  }
}
@keyframes myfirst {
  0% {
    opacity: 0;
    height: 0vh;
  }

  100% {
    opacity: 1;
    height: 100vh;
    // margin-top: 20px;
  }
}
// 过度动画
.sss-enter-active {
  animation: mmm 0.2s;
}
.sss-leave-active {
  animation: mmm 0.2s reverse;
}
@keyframes mmm {
  0% {
    opacity: 0;
    transform: translatey(100px);
  }
  100% {
    opacity: 1;
    transform: translatey(0px);
  }
}
.lift2 {
  height: 60%;
  width: 320px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  // border: 1px solid #000;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    &:nth-child(1) {
    }
  }
  .neir {
    flex: 1;
    height: 40px;
  }
  .xiala {
    height: 40px;
    width: 40px;
    margin-right: 20px;
    img {
      width: 50%;
      height: 50%;
      transform: rotate(-90deg);
    }
  }
  .bufen {
    display: flex;
    flex: 1;

    // justify-content: space-between;
    li {
      height: 40px;
      width: 40px;
      margin-right: 20px;
      border-radius: 50%;
      border: 1px solid rgb(201, 201, 201);
      &:nth-child(1) {
        img {
          margin-top: 3px;
          width: 70%;
          height: 70%;
          // transform: rotate(-90deg);
        }
      }
      &:nth-child(2) {
        img {
          margin-top: 3px;
          width: 65%;
          height: 60%;
          // transform: rotate(-90deg);
        }
      }
      &:nth-child(3) {
        img {
          margin-top: 3px;
          width: 70%;
          height: 70%;
          // transform: rotate(-90deg);
        }
      }
      &:nth-child(4) {
        img {
          margin-top: 3px;
          width: 65%;
          height: 60%;
          // transform: rotate(-90deg);
        }
      }
      &:nth-child(5) {
        img {
          margin-top: 3px;
          width: 65%;
          height: 60%;
          // transform: rotate(-90deg);
        }
      }
    }
    // border: 1px solid #000;
  }
}
</style>